<template>
  <div class="zh geo-CN in-store">

  <div class="tp-banner on" data-start="1510423875" data-end="1510545600" data-show="yes">
    <a target="_blank" class="top-banner" href="/campaigns/2017-single-day"></a>
  </div>

  <div class="large-header">
    <div id="v3Header-bg" class="header-bg " data-page="1">
      <div class="wrapper-large">
        <div class="header-topLeft">
          <ul>
            <li class="follow-us header-layer-wrapper">
              <div class="follow-head header-layer"><a href="#">关注我们 <span class="arrow-down"></span></a>     <!--   current  -->
                <div class="line"><span></span></div>
              </div>
              <div class="header-layer-menu">
                <ul>
                  <li class="weixin-icon">
                    <strong> <span class="icon-header-weixin"></span> 扫描关注微信</strong>
                    <i class="icon-qrcode-wechat"></i>
                    <span>官方微信号：</span>
                  </li>
                </ul>
              </div>
            </li>
            <li class="pipe"></li>
            <li class="header-layer-wrapper">
              <div class="sevice-head header-layer">
                <a href="/">帮助中心<span class="arrow-down"></span></a>
                <div class="line"><span></span></div>
              </div>
              <div class="header-layer-menu">
                <ul>
                  <li><a href="/" target="_blank">常见问题</a></li>
                  <li><a href="" target="_blank">在线客服</a></li>
                  <li><a href="/" target="_blank">联系我们</a></li>
                  <li><a href="/" target="_blank">自助服务</a></li>
                </ul>
              </div>
            </li>

          </ul>
        </div>
        <!--  End Of header-topLeft  -->
        <div class="header-topRight">
          <ul>
            <li><a rel="nofollow" class="login-thrid" href="/">QQ登录</a></li>
            <li><a rel="nofollow" class="login-thrid" href="/">微博登录</a></li>
            <li><a rel="nofollow" class="login-thrid" href="/">支付宝登录</a></li>
            <li class="pipe"></li>
            <li class="normal-login"><router-link to="login">登录</router-link></li>
            <li class="pipe"></li>
            <li class="register"><router-link to="register">注册</router-link></li>
          </ul>
        </div>
        <!--  End Of header-topRight  -->
      </div>
      <!--  End Of header-topRight  -->
    </div>
    <!--  End Of header-top  -->
    <div style="clear:both"></div>
  </div>
  <!-- Header End -->

  <!-- Content Begin -->
  <div id="content" class="BGNoCol" style="margin-bottom: 90px;">
    <div id="in-store-landing" style="background-color: #f6f6f6">

      <div class="hero-banner loading-banner">
        <div id="banner-carousel-1" class="carousel slide carousel-fade" data-ride="carousel">

          <div class="carousel-inner" role="listbox" data-dollar="5" data-img="//extrabux-static.b0.upaiyun.com/images/banners/instore-main-banner-1-2.jpg">
            <div class="item" style="background: #f31125">
              <a href="javascript:void(0);">
                <img width="1200" height="320" src="//extrabux-static.b0.upaiyun.com/images/banners/instore-main-banner-1-2.jpg" style="display: block;">
              </a>
            </div>
            <div class="item active" style="background: #8b23ff">
              <a href="javascript:void(0);">
                <img width="1200" height="320" src="../../assets/images/banner.png" style="display: block;">
              </a>
            </div>
          </div>

        </div>
      </div>

      <div class="in-store-link-bar">
        <ul>
          <li>
            <a id="showGuide" href="javascript: void 0" @click="knowledgePop = true">
              <span class="icon-in-store-link-1"></span>
              了解返现
              <em class="divide"></em>
            </a>
          </li>
          <li>
            <a href="/">
              <span class="icon-in-store-link-2"></span>
              银行卡
              <em class="divide"></em>
            </a>
          </li>
          <li>
            <a href="/">
              <span class="icon-in-store-link-3"></span>
              返现商家
              <em class="divide"></em>
            </a>
          </li>
          <li>
            <a href="/">
              <span class="icon-in-store-link-4"></span>
              线下返现明细
            </a>
          </li>
        </ul>
      </div>

      <div class="in-store-steps">
        <div class="in-store-title icon-in-store-title-1"></div>
        <ul class="steps">
          <li>
            <div class="step-icon step-1"></div>
            <div class="step-detail"  style="position: relative; text-align: left;">
              <h4 style="font-size: 14px;line-height: 1.5;text-align: center;"><span style="font-size: 22px;">Step1: </span>使用邮箱,手机号快速登录</h4>
            </div>
          </li>
          <li>
            <div class="step-icon step-2"></div>
            <div class="step-detail"  style="position: relative; text-align: left;">
              <h4 style="font-size: 14px; line-height: 1.5;text-align: center;"><span style="font-size: 22px;">Step2: </span>绑定任意一张Visa卡</h4>
            </div>
          </li>
          <li>
            <div class="step-icon step-3"></div>
            <div class="step-detail"  style="position: relative; text-align: left;">
              <h4 style="font-size: 14px;line-height: 1.5;text-align: center;"><span style="font-size: 22px;">Step3: </span>使用已绑定的信用卡到美国<br>商家线下刷卡消费，2个工作日确认返现</h4>
            </div>
          </li>
        </ul>

      </div>

      <div class="in-store-common-qa" style="text-align: left;">
        <div class="in-store-title icon-in-store-title-3"></div>
        <ul>
          <li v-for="faq in faqs">
            <span class="icon-in-store-qa"><img src="../../assets/images/问号icon.png" alt=""></span>
            <div class="qa-part">
              <p class="question" style="font-size: 14px;">{{faq.q}}</p>
              <p class="answer" style="font-size: 13px;">{{faq.a}}</p>
            </div>
          </li>
        </ul>
      </div>
      <div style="clear: both; height:10px;" class="clear-height"></div>
      <div style="width: 100%;margin-top: 20px;">
        <ul style="text-align: center; font-size: 16px;">
          <li style="width: 25%; float: left;">推荐奖励</li>
          <li style="width: 25%; float: left;">关于我们</li>
          <li style="width: 25%; float: left;">隐私条款</li>
          <li style="width: 25%; float: left;">服务条款</li>
        </ul>
      </div>

      <div class="in-store-bind-card-bar">
        <div class="bind-card-content">
          <span class="icon-in-store-bind-card" style="margin-right: 0px;"><img src="../../assets/images/浮动banner银行卡icon.png" alt=""></span>
          <b style="color: #ffc000;">在美国线下商店消费，即可获得收益返现！</b>
          <a class="bindCard" style="font-size: 18px;">立即绑卡,激活线下返现</a>
        </div>
      </div>
    </div>

    <div class="am-dimmer am-active" :class="knowledgePop ? '': 'hide'" data-am-dimmer="" style="position: fixed; left: 0;top: 0;display: block;width: 100%;height: 100%;background: rgba(0,0,0,0.2); z-index: 1000;"></div>
    <div id="in-store-guide" class="in-store-guide" :class="knowledgePop ? '': 'hide'">
      <div class="carousel slide carousel-fade" data-ride="carousel" style="width: 100%; height: 100%;">
        <div class="carousel-control-wrapper">
          <a class="left carousel-control" href="#banner-carousel" role="button" data-slide="prev"><i class="icon-l-arrow-l"></i></a>
          <a class="right carousel-control" href="#banner-carousel" role="button" data-slide="next"><i class="icon-l-arrow-r"></i></a>
        </div>
        <div class="carousel-inner" style="width: 560px; height: 431px; top: 50%; left: 50%; transform: translate(-50%, -50%);">
          <swiper :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper">
            <!-- slides -->
            <swiper-slide>
              <img alt="" style="width: 560px; height: 431px;" src="../../assets/images/非同返享.png">
            </swiper-slide>
            <swiper-slide>
              <img alt="" style="width: 560px; height: 431px;" src="../../assets/images/选择多多.png">
            </swiper-slide>
            <swiper-slide>
              <img alt="" style="width: 560px; height: 431px;" src="../../assets/images/简单易用.png">
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
          </swiper>
          <div
            class="close-pop"
            @click="knowledgePop = false"
            style="position: absolute; top: 30px; right: 37px; margin: 0;z-index: 10;"
          >
            <img style="width: 20px;" src="../../assets/images/关闭X icon.png" alt="">
          </div>
        </div>
      </div>
    </div>

    <div id="store-detail" class="a-store-detail">
      <div class="store-inner-box">
        <div class="store-info">
          <div class="left-part">
            <img src="" alt="">
          </div>
          <div class="right-part">
            <p class="name">Macys.com(梅西百货)</p>
            <p class="cashback">线下返现2.5% <em>线下返现2.5%</em></p>
            <p class="expiration">过期时间：08/31/2017 11:59:59. 000 PM PDT</p>
          </div>
        </div>

        <ul class="detail-tab-nav">
          <li class="active"><a href="#detail-left-content" class="first" data-toggle="tab">活动</a></li>
          <li><a href="#detail-right-content" data-toggle="tab">详情</a></li>
        </ul>

        <div class="tab-pane detail-left-content active" id="detail-left-content">

          <div class="gift-box">
            <span class="icon-in-store-gift"></span>
            <p class="card-1"><span class="icon-in-store-card-2"></span>所有民生Visa品牌信用卡 十一期间线下消费返现翻倍！</p>
            <p class="card-2"><span class="icon-in-store-card-1"></span>使用民生海淘联名卡消费线下返现额外加2% </p>
          </div>
          <span class="bind-card bindCard">立即绑卡，激活线下返现</span>

        </div>

        <div class="tab-pane detail-right-content" id="detail-right-content">
          <p>详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情</p>
        </div>

      </div>
      <div class="store-detail-links">
        <p class="store-link-1">
          <a target="_blank" href=""><span class="icon-in-store-location"></span>商家境外店铺地址</a>
        </p>
        <p class="store-link-2">
          <a><span class="icon-in-store-shopping-cart"></span>商家线上购物返利</a>
        </p>
      </div>
    </div>
    <div id="user-login-model"><div id="user-login"></div></div>


    <div style="clear: both; height:10px;" class="clear-height"></div>
  </div>
  <!-- Content End -->


  <div id="scroll-top-1" class="right-layout-v2 scroll-top-v2 scroll-hot-list">
    <a href="//blog.ebates.cn/2017/04/haitao-guide-must-see/" class="shopping-cart icon-floating-layer-link-1" target="_blank">海淘入门</a>

    <a href="/help/how-ebates-works" class="tutorials">使用教程</a>
    <a href="/campaign/forwarder" class="haitao icon-floating-layer-link-2" target="_blank">海淘转运</a>

    <div class="followus">

      <a href="javascript:;" class="follow icon-floating-layer-link-4">关注我们</a>

      <div class="icons">
        <div class="icon-weibo">
          <span class="ico icon-float-layer-weibo"></span>
          <a href="http://www.weibo.com/extrabuxcom" target="_blank">
            <div class="panel">
              <h4>关注新浪微博</h4>
              <div><i class="icon-qrcode-weibo"></i></div>
            </div>
          </a>
        </div>
        <div class="icon-weixin">
          <span class="ico icon-float-layer-wechat"></span>

          <div class="panel">

            <div>
              <h4>关注微信服务号</h4>
              <div><i class="icon-qrcode-wechat"></i></div>
              <p>Extrabux</p>
            </div>

            <div class="follow-right">
              <h4>关注微信订阅号</h4>
              <div><i class="icon-qrcode-wechat-daily"></i></div>
              <p>Extrabux_haitao</p>
            </div>

          </div>

        </div>
      </div>

    </div>

    <a target="_blank" rel="nofollow" href="http://wpa.b.qq.com/cgi/wpa.php?ln=1&amp;key=XzgwMDA2NjkzMF83MjI3OF84MDAwNjY5MzBfMl8" class="qq-chat icon-floating-layer-link-5">qq客服</a>
    <a href="javascript:;" class="scrollto-top icon-float-layer-gotop">返回顶部</a>
  </div>

  <div id="scroll-top-2" class="right-layout-v2 scroll-top-v2 right-layout-small">

    <div class="small-link-1">
      <a href="//blog.ebates.cn/2017/04/haitao-guide-must-see/" class="shopping-cart icon-small-floating-layer-link-1" target="_blank">海淘入门</a>
      <a href="//blog.ebates.cn/2017/04/haitao-guide-must-see/" class="shopping-cart icon-small-floating-layer-link-1-hover" target="_blank">海淘入门</a>
    </div>

    <div class="small-link-2">
      <a href="/campaign/forwarder" class="haitao icon-small-floating-layer-link-2" target="_blank">海淘转运</a>
      <a href="/campaign/forwarder" class="haitao icon-small-floating-layer-link-2-hover" target="_blank">海淘转运</a>
    </div>

    <div class="small-link-4">
      <div class="followus">

        <a href="javascript:;" class="follow icon-small-floating-layer-link-4">关注我们</a>
        <a href="javascript:;" class="follow icon-small-floating-layer-link-4-hover">关注我们</a>

        <div class="icons">
          <div class="icon-weibo">
            <span class="ico icon-float-layer-weibo"></span>

            <a href="http://www.weibo.com/extrabuxcom" target="_blank">
              <div class="panel">
                <h4>关注新浪微博</h4>
                <div><i class="icon-qrcode-weibo"></i></div>
              </div>
            </a>

          </div>
          <div class="icon-weixin">
            <span class="ico icon-float-layer-wechat"></span>

            <div class="panel">

              <div>
                <h4>关注微信服务号</h4>
                <div><i class="icon-qrcode-wechat"></i></div>
                <p>Extrabux</p>
              </div>

              <div class="follow-right">
                <h4>关注微信订阅号</h4>
                <div><i class="icon-qrcode-wechat-daily"></i></div>
                <p>Extrabux_haitao</p>
              </div>

            </div>

          </div>
        </div>

      </div>
    </div>

    <div class="small-link-5">
      <a target="_blank" href="http://wpa.b.qq.com/cgi/wpa.php?ln=1&amp;key=XzgwMDA2NjkzMF83MjI3OF84MDAwNjY5MzBfMl8" class="qq-chat icon-small-floating-layer-link-5">qq客服</a>
      <a target="_blank" href="http://wpa.b.qq.com/cgi/wpa.php?ln=1&amp;key=XzgwMDA2NjkzMF83MjI3OF84MDAwNjY5MzBfMl8" class="qq-chat icon-small-floating-layer-link-5-hover">qq客服</a>
    </div>

    <div class="small-link-6">
      <a href="javascript:;" class="scrollto-top icon-small-float-layer-gotop">返回顶部</a>
      <a href="javascript:;" class="scrollto-top icon-small-float-layer-gotop-hover">返回顶部</a>
    </div>
  </div>

  <div id="whiteOverlay"></div>
  </div>
</template>

<script type="text/babel">
  import faqs from './faqs'
  import '../../pc.page.css'
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'

  export default {
    components: {
      swiper,
      swiperSlide
    },
    data () {
      return {
        faqs: faqs,
        knowledgePop: false,
        notNextTick: true,
        swiperOption: {
          // swiper options 所有的配置同swiper官方api配置
          autoplay: 3000,
          grabCursor: true,
          setWrapperSize: true,
          autoHeight: true,
          pagination: '.swiper-pagination',
          onTransitionStart (swiper) {
            console.log(swiper)
          }
        },
      }
    },
    computed: {
    },
    methods: {
    },
    mounted () {
    },
    destroyed () {
    }
  }
</script>

<style scoped lang="less">
  #content {
    margin-top:0;
    width: 100%;
  }
  body {
    background-color: #fff;
  }
  /******************************************************************/
  .top-banner {
    background-image: url("../../assets/images/topbanner-1.jpg");
  }
  #in-store-landing .in-store-link-bar {
    background: #deb002;
  }
  #in-store-landing .in-store-link-bar ul li em.divide {
    background: #666867;
  }
  #in-store-landing .in-store-link-bar ul li a {
    color: #fff;
    font-size: 20px;
  }
  .icon-in-store-laber-cashback,
  .icon-in-store-link-1,
  .icon-in-store-link-2,
  .icon-in-store-link-3,
  .icon-in-store-link-4 {
    width: 30px;
    height: 30px;
  }
  #in-store-landing .in-store-link-bar ul li span {
    vertical-align: -8px;
  }

  ul li .step-icon {
    width: 75px;
    height: 75px;
    /*background-size: 75px 225px;*/
    float: none!important;
    margin: 0 auto!important;
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
  }

  ul li .step-icon.step-1 {
    background-image: url(../../assets/images/登录icon.png);
  }

  ul li .step-icon.step-2 {
    background-image: url(../../assets/images/VISAicon.png);
  }

  ul li .step-icon.step-3 {
    background-image: url(../../assets/images/消费包icon.png);
  }

  #in-store-guide {
    display: block;
    position: fixed;
    z-index: 1001;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: transparent;
  }
</style>
<style>
  .swiper-pagination.swiper-pagination-bullets {
    bottom: 44px;
  }
  .swiper-pagination-bullet-active {
    opacity: 1;
    background: #f8c701!important;
  }
</style>
